{% extends "layouts/base.njk" %}

{# Update "content" with additional headings and so forth, so we can pass it
   through the toc filter. #}
{% set content %}
  {{ content | safe }}

  {% import 'macros/reference.njk' as macros with context %}

  <h2 id="stable_apis">Stable APIs</h2>
  <p>
    Release information is not available for APIs before Chrome 53, which was released in August 2016.
  </p>
  {{ macros.renderReferenceTable(collections.reference, 'stable') }}

  <h2 id="beta_apis">Beta APIs</h2>
  <p>
    These APIs are only available in the Chrome Beta and Dev channels:
  </p>
  {{ macros.renderReferenceTable(collections.reference, 'beta') }}

  <h2 id="dev_apis">Dev APIs</h2>
  <p>
    These APIs are only available in the Chrome Dev channel:
  </p>
  {{ macros.renderReferenceTable(collections.reference, 'dev') }}

  <h2 id="platform_apps_apis">Platform Apps APIs</h2>
  <p>
    These APIs support Chrome Apps on all platforms.
  </p>
  <div class="aside aside--warning">
    These APIs are deprecated.
    Chrome will be removing support for Chrome Apps on all platforms.
    Learn more about <a href="/docs/apps/migration">migrating your app</a>.
  </div>
  {{ macros.renderReferenceTable(collections.reference, '', true) }}

{# TODO(samthor): Chrome currently has none of these. #}
{#
  <h2 id="experimental">Experimental APIs</h2>
  <p>
    Chrome also has experimental APIs, some of which will become supported APIs in future releases of Chrome.
  </p>
#}
{% endset %}

{% block title_bar %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% set tocContents %}
  {{- content | toc | safe -}}
{% endset %}

{% block content %}
  <div class="display-flex gap-top-300 lg:gap-top-400 ">
    {% include 'partials/navigation-tree.njk' %}

    <article class="stack measure-long center-margin pad-left-400 pad-right-400">
      <h1 class="type--h2">{{ title }}</h1>

      {% include 'partials/toc-inner.njk' %}

      <div class="stack type">
        {{ content | safe }}
      </div>

    </article>

    {% include 'partials/toc-side.njk' %}
  </div>
{% endblock %}